<template>
  <view class="data-item disFlexCol gap-4 py-16" :style="{ width: width }">
    <text class="fz-12" style="color: #dcdee0">{{ data.name }}</text>
    <view class="disFlxAC">
      <text class="fz-18 linh-28 font-bold color-white">{{ data.num }}</text>
      <text class="fz-12 linh-16 color-white mt-4">{{ data.unit }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import type { PropType } from 'vue';
  export interface IDataItem {
    name: string;
    num: number;
    unit: string;
  }

  const props = defineProps({
    data: {
      type: Object as PropType<IDataItem>,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '',
    },
  });
</script>
<style lang="scss" scoped>
  .data-item {
    .name {
      color: #dcdee0;
    }
  }
</style>
